<template>
  <div id="CompositionAPI">
    <div id="userlist">
      <span
        v-for="item in userList"
        :class="{ select: item.userId == selectUser.userId }"
        :key="item.userId"
        @click="selectUser = item"
        >-{{ item.name }}-</span
      >
    </div>
    <div>
      <CompositionComponent :user="selectUser" />
    </div>
  </div>
</template>

<script>
import CompositionComponent from "../components/CompositionAPI/index";

export default {
  components: {
    CompositionComponent,
  },
  data() {
    return {
      userList: [
        { userId: 1, name: "lily" },
        { userId: 2, name: "xiaoming" },
        { userId: 3, name: "liugong" },
      ],
      selectUser: {},
    };
  },
  mounted() {
    this.selectUser = this.userList[0];
  },
};
</script>

<style lang="less" scoped>
.select {
  color: #f00;
}
</style>